<template>
  <div v-loading="loading" class="main">
    <el-descriptions title="系统维护配置" border>
      <template #extra>
        <el-button :icon="Edit" type="primary" @click="editConfig"
          >修改</el-button
        >
      </template>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="系统维护模式"
      >
        <el-tag :type="configInfo?.maintenanceMode ? 'success' : 'danger'">
          {{ configInfo?.maintenanceMode ? "开启" : "关闭" }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="维护提示消息"
      >
        {{ configInfo?.maintenanceMessage || "--" }}
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="功能开关配置" border>
      <template #extra>
        <el-button :icon="Edit" type="primary" @click="editFeatures"
          >修改</el-button
        >
      </template>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="通知功能开关"
      >
        <el-tag
          :type="configInfo?.notificationEnabled ? 'success' : 'danger'"
          >{{ configInfo?.notificationEnabled ? "开启" : "关闭" }}</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="全局通知系统开关"
      >
        <el-tag
          :type="configInfo?.globalNotificationEnabled ? 'success' : 'danger'"
          >{{ configInfo?.globalNotificationEnabled ? "开启" : "关闭" }}</el-tag
        >
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="API业务规则配置" border>
      <template #extra>
        <el-button :icon="Edit" type="primary" @click="editApiRules"
          >修改</el-button
        >
      </template>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="API调用超时时间（秒）"
      >
        {{ configInfo?.apiCallTimeoutSeconds }}s
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="重试间隔（秒）"
      >
        {{ configInfo?.retryIntervalSeconds }}s
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="最大重试次数"
      >
        {{ configInfo?.maxRetryAttempts }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="支付系统配置" border>
      <template #extra>
        <el-button :icon="Edit" type="primary" @click="editPayment"
          >修改</el-button
        >
      </template>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="订单过期时间（分钟）"
      >
        {{ configInfo?.orderExpireMinutes }}
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="每小时最大订单数"
      >
        {{ configInfo?.maxOrderPerHour }}
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="最小支付金额"
      >
        {{ configInfo?.minPaymentAmount }}
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="最大支付金额"
      >
        {{ configInfo?.maxPaymentAmount }}
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="积分汇率"
      >
        {{ configInfo?.pointsRate }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="Telegram Bot配置" border>
      <template #extra>
        <el-button :icon="Edit" type="primary" @click="editTelegramBot"
          >修改</el-button
        >
      </template>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="主系统 Telegram Bot 名称"
      >
        {{ configInfo?.telegramBotName || "--" }}
      </el-descriptions-item>
      <el-descriptions-item
        label-align="center"
        align="center"
        label="主系统 Telegram Bot 是否启用"
      >
        <el-tag :type="configInfo?.telegramBotEnabled ? 'success' : 'danger'">
          {{ configInfo?.telegramBotEnabled ? "开启" : "关闭" }}
        </el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <ConfigDialog ref="configDialogRef" @refresh="queryAgentConfig" />
    <FeaturesDialog ref="featuresDialogRef" @refresh="queryAgentConfig" />
    <ApiRulesDialog ref="apiRulesDialogRef" @refresh="queryAgentConfig" />
    <PaymentDialog ref="paymentDialogRef" @refresh="queryAgentConfig" />
    <TelegramBotDialog ref="telegramBotDialogRef" @refresh="queryAgentConfig" />
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { getAdminConfig } from "@/api/adminDynamicApi";
import ConfigDialog from "./components/ConfigDialog.vue";
import FeaturesDialog from "./components/FeaturesDialog.vue";
import ApiRulesDialog from "./components/ApiRulesDialog.vue";
import PaymentDialog from "./components/PaymentDialog.vue";
import TelegramBotDialog from "./components/TelegramBotDialog.vue";
const configInfo = ref({
  maintenanceMode: false,
  maintenanceMessage: "系统正在维护中，请稍后再试",
  notificationEnabled: true,
  globalNotificationEnabled: true,
  apiCallTimeoutSeconds: 45,
  maxRetryAttempts: 5,
  retryIntervalSeconds: 3,
  orderExpireMinutes: 10,
  maxOrderPerHour: 10,
  minPaymentAmount: 10,
  maxPaymentAmount: 1000000,
  pointsRate: 7.25,
  telegramBotName: "MainSystemBot",
  telegramBotEnabled: true
});
const configDialogRef = ref();
const editConfig = () => {
  configDialogRef.value?.open(configInfo.value);
};
const featuresDialogRef = ref();
const editFeatures = () => {
  featuresDialogRef.value?.open(configInfo.value);
};
const apiRulesDialogRef = ref();
const editApiRules = () => {
  apiRulesDialogRef.value?.open(configInfo.value);
};
const paymentDialogRef = ref();
const editPayment = () => {
  paymentDialogRef.value?.open(configInfo.value);
};
const telegramBotDialogRef = ref();
const editTelegramBot = () => {
  telegramBotDialogRef.value?.open(configInfo.value);
};
const loading = ref(false);
const queryAgentConfig = async () => {
  try {
    loading.value = true;
    const { data } = await getAdminConfig();
    console.log(data, "data");
    configInfo.value = data;
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
queryAgentConfig();
</script>
<style lang="scss" scoped>
.main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  .el-descriptions {
    padding: 20px;
    background-color: #fff;
  }
}
</style>
